<template>
  <div class="plans">
    <div class="todo-header">
      <div class="item-1">
        序号
      </div>
      <div class="item-2">
        {{planType=='001'?'日':'周'}}计划时间
      </div>
      <div class="item-2">
        部门
      </div>
      <div class="item-2">
        所属工序
      </div>
      <div class="item-5">
        预计完成数量
      </div>
      <div class="item-5">
        已完成数量
      </div>
      <div class="item-6">
        完成率
      </div>
    </div>
    <a-carousel v-if="todayPlanCompletionRate.length" :autoplay="true" dot-position="right" dots="false" :slides-to-show="num" :slides-to-scroll="1" id="carousel">
      <div class="todo-item" v-for="(item,index) in todayPlanCompletionRate" :key="index">
        <div class="item-1">
          {{ index + 1 }}
        </div>
        <div class="item-2">
          {{item.finishDatetime}}
        </div>
        <div class="item-2">
          <TableTootip :content="item.organizationName"></TableTootip>
        </div>
        <div class="item-2">
          <TableTootip :content="item.nowWpcodeName"></TableTootip>
        </div>
        <div class="item-5">
          {{item.productQuantity}}
        </div>
        <div class="item-5">
          {{ item.finishQuantity }}
        </div>
        <div class="item-6">
          {{ item.ratio }}
        </div>
      </div>
    </a-carousel>
    <div class="nodata" v-if="!todayPlanCompletionRate.length">暂无数据</div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";
import TableTootip from "../../../components/TableTootipHome";

export default {
  props:['planType'],
  components:{
    TableTootip
  },
  data() {
    return{
      todayPlanCompletionRate:[],
      num:4
    }
  },
  watch:{
    planType(val){
      this.getTodayPlanCompletionRate(val)
    }
  },
  mounted() {
    this.getTodayPlanCompletionRate(this.planType)
  },
  methods:{
    //当月各工序日计划完成率排名
    getTodayPlanCompletionRate(planType) {
      req('post', `dataBoard/getTodayPlanCompletionRate`,{planType})
        .then(res => {
          if (res.result === 'success') {
            this.todayPlanCompletionRate = res.data
            this.num = this.todayPlanCompletionRate.length<4?this.todayPlanCompletionRate.length:4
          }
        })
    },
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
.plans {
  position: relative;
  height: 255px;
}
.todo-item,.todo-header {
  display: flex!important;
  line-height: 45px;
  font-size: 14px;
  border-bottom: 1px solid #e8e8e8;
}
.todo-header {
  margin-top: 5px;
  background-color: #f1f2f5;
}
.item-1 {
  width: 7.2%;
  padding-left: 5px;
}
.item-2,.item-4,.item-5{
  width: 16.5%;
  padding-left: 2px;
}
.item-6{
  width: 10%;
}
@media screen and (max-width: 1440px) {
  .todo-item,.todo-header{
    font-size: 12px;
  }
}
</style>
